import React ,{useState,useRef}from 'react';
import DynamicForm from '@/components/dynamicForm'
import { Button,Slider } from 'antd';
import dayjs from 'dayjs';
import {searchCar} from '@/util/api/car.ts'
import { UploadOutlined } from '@ant-design/icons';

import type { SliderSingleProps } from 'antd';

const marks: SliderSingleProps['marks'] = {
    0: '0°C',
    26: '26°C',
    37: '37°C',
    100: {
      style: { color: '#f50' },
      label: <strong>100°C</strong>,
    },
  };
const schemaDemo= [
    {
        label:'车名',
        name:'first_letter',
        component:'Text',
        formItemProps:{
            style:{
                width:'500px'
            },
            rules:[
                {
                    required:true,
                    message:'请输入汽车的名字',
                    trigger:'blur'
                }
            ]
        },
        componentProps:{
            allowClear:true,
            showCount:true,
            maxLength:8,
            placeholder:'请输入车的首字母'
        }
    },
    {
        label:'数量',
        name:'number',
        component:'InputNumber',
        formItemProps:{
            style:{
                width:'500px'
            },
            min:1,
            max:10,
            value:0,
        },
        componentProps:{
            allowClear:true,
            showCount:true,
            maxLength:8,
            placeholder:'请输入车的首字母'
        }
    },
    {
        label: "密码",
        name: "password",
        component: "Password",
        formItemProps:{
            rules:[
                {
                    required:true,
                    message:'密码不能为空',
                    trigger:'blur'
                },
                {
                    pattern:/^[A-Za-z0-9]+$/,
                    message:'密码只能是英文和数字',

                }
            ]
        },
    },
    {
            label: "确认密码",
            name: "password2",
            component: "Password",
            formItemProps:{
                rules:[
                    {
                        required:true,
                        message:'密码不能为空',
                        trigger:'blur'
                    },
                    {
                        pattern:/^[A-Za-z0-9]+$/,
                        message:'密码只能是英文和数字',
    
                    },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                          if (!value || getFieldValue('password') === value) {
                            return Promise.resolve();
                          }
                          return Promise.reject(new Error('The new password that you entered do not match!'));
                        },
                      }),
                ]
            },
        componentProps: {
            allowClear: true,
            placeholder:'请输入密码',
            maxLength: 20,
            showCount: true,
        }
        
    },
    {
        label: "性别",
        name: "sex",
        component: "Radio",
        componentProps: {
            options: [
              { value: 1, label: "男" },
              { value: 2, label: "女" },
              { value: 3, label: "保密" },
          ],  
        },
        formItemProps: {
          rules: [
              {
                required: true,
                message: "请选择性别",

              },
          ],
        },
        value: 1,
    },
    {
        label: "生日",
        name: "birthday",
        component: "DatePicker",
        formItemProps: {
            rules: [
                {
                    required: true,
                    message: "生日日期不能为空",
 
                },
            ],
        },
        componentProps:{
            placeholder:"请选择日期"
        }
    },
    {
        label: "查询日期",
        name: "createDate",
        component: "RangePicker",
        formItemProps: {
            rules: [
                {
                    required: true,
                    message: "生日日期不能为空",
 
                },
            ],
        },
        componentProps:{
            placeholder:"请选择日期"
        }
        
    },
    {
        label: "兴趣",
        name: "hobby",
        component: "Checkbox",
        componentProps: {
            options: [
                { value: 1, label: "足球" },
                { value: 2, label: "篮球" },
                { value: 3, label: "排球" },
            ],
        },
    },
    {
        label: "国家",
        name: "country",
        component: "Select",
        componentProps:{
            allowClear: true,
            placeholder:'请选择一个国家',
            options: [
                { value: 1, label: "中国" },
                { value: 2, label: "美国" },
                { value: 3, label: "俄罗斯" },
            ],
        }
       
       
    },
    {
        label: "简介",
        name: "desc",
        component: "Textarea",
        componentProps: {
            allowClear: true,
            placeholder:'请输入简介',
            autoSize: {
                minRows: 4,
                maxRows: 4,
            },
            maxLength: 200,
            showCount: true,
        }
        
    },
    {
        label:'级联选择',
        name:'number',
        component:'Cascader',
        formItemProps:{
            style:{
                width:'500px'
            },
            min:1,
            max:10,
            value:0,
        },
        componentProps:{
            allowClear:true,
          
            placeholder:'请输入车的首字母',
            options:[{
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },]
        }
    },  
    {
        label:'Slider',
        name:'slider',
        component:'Slider',
        componentProps:{
            defaultValue:[20,30],


        },
       
    },
    {
        label:'Slider',
        name:'slider2',
        component:'Slider',
        componentProps:{
            vertical:true,
            range:true,
            step:10,
            marks,
            defaultValue:[20, 50]
        },
       
    },
    {
        label:'Switch',
        name:'switch',
        component:'Switch',
        componentProps:{
            defaultChecked:false,
        },
       
    },
    {
        label:'TreeSelect',
        name:'treeSelect',
        component:'TreeSelect',
        componentProps:{
            treeDefaultExpandAll:true,
            style:{width:'100%'},
            allowclear:true,
            treeData:[
                {
                    value: 'parent 1',
                    title: 'parent 1',
                    children: [
                      {
                        value: 'parent 1-0',
                        title: 'parent 1-0',
                        children: [
                          {
                            value: 'leaf1',
                            title: 'leaf1',
                          },
                          {
                            value: 'leaf2',
                            title: 'leaf2',
                          },
                        ],
                      },
                      {
                        value: 'parent 1-1',
                        title: 'parent 1-1',
                        children: [
                          {
                            value: 'leaf3',
                            title: <b style={{ color: '#08c' }}>leaf3</b>,
                          },
                        ],
                      },
                    ],
                  },
            ]
        },
       
    },
    {
        label:'上传',
        name:'image',
        component:'Upload',
        componentProps:{
            'listType':"picture-card",
            valuePropName:'fileList',
            getValueFromEvent:(e: any) => {
                if (Array.isArray(e)) {
                    return e;
                }
                return e?.fileList;
            },
            children:[
                {
                    label:' 上传',
                    name:'',
                    component:'Button',
                    componentProps:{
                        // type:'primary',  
                        value:'上传',
                        icon:<UploadOutlined />,
                    },
                   
                    
                   
                },
                // {
                //     label:' 模态框',
                //     name:'',
                //     component:'Modal',
                //     componentProps:{
                //         // open,  
                //         title:'上传',
                //         onCancel:<UploadOutlined />,
                //     },
                //     children:[
                //         {
                //             label:' 模态框',
                //             name:'',
                //             component:'Image',
                //             componentProps:{
                //                 style:{
                //                     width:'100%'
                //                 },
                //                 src:''
                //             },
                           
        
                //         }
                //     ]

                // }
            ],
        },
        
       
    },
    
        
]
const Home:React.FC = () =>{
    const formRef = useRef();
    const [schema,useSchema] = useState(schemaDemo)
    const [model,useModel] = useState({first_letter:'A',sex:2,birthday:'',hobby:[],country:'',desc:''});
    const [previewOpen,setPreviewOpen] = useState(false);
    const handleCancel = () => setPreviewOpen(false);
    const [previewImage, setPreviewImage] = useState('');
    const [previewTitle, setPreviewTitle] = useState('');
    const handleSubmit = async () =>{
        const formData = await formRef.current.validateFieldsFn();
        if(formData.birthday){
            formData.birthday = dayjs(formData.birthday).format("YYYY-MM-DD");
            console.log('提交信息：',formData)
        }
        console.log(formData,'===formData');
        
        const data = await searchCar(formData.first_letter)
        console.log(data,'=============data=')

      }
      const handleReset = (isInit:boolean) =>{
        
        formRef.current.resetFieldsFn(isInit)
      }
    return (
        <section>
            <h3>我是汽车列表</h3>
            <DynamicForm ref={formRef} model={model} schema={schema} labelCol={{span:4}} wrapperCol={{span:20}}/>
            <div style={{display: "flex",justifyContent:"center"}}>
                <Button onClick={()=>handleReset()} style={{marginLeft:'20px'}}>重置（全部清空）</Button>
                <Button onClick={()=>handleReset(true)} style={{marginLeft:'20px'}}>重置</Button>
                <Button onClick={()=>handleSubmit()} type="primary" style={{marginLeft:'20px'}}>提交</Button>
            </div>

        </section>

    )
}
export default Home;